<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      class="form-search"
    >
      <SearchTool
        :code="{
          factory: 'factoryCode',
          workshop: 'workshopSectionCode',
          line: 'productLinesCode',
          section: 'processSectionCode',
        }"
        v-model:factory="queryParams.factoryCode"
        v-model:workshop="queryParams.workshopSectionCode"
        v-model:line="queryParams.productLinesCode"
        v-model:section="queryParams.processSectionCode"
      ></SearchTool>
      <el-form-item label="工艺路线名称" prop="processRouteName">
        <el-input
          v-model="queryParams.processRouteName"
          placeholder="请输入工艺路线名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="plus"
          @click="handleAdd"
          v-hasPermi="['technology:processRoute:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['technology:processRoute:edit']"
          >编辑</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['technology:processRoute:remove']"
          >删除</el-button
        >
      </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="processRouteList"
      show-overflow-tooltip
      :max-height='500'
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column
        label="工艺路线编号"
        align="center"
        prop="processRouteNo"
      /> -->
      <el-table-column label="工艺路线编号" prop="processRouteNo">
        <template #default="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{
            scope.row.processRouteNo
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="工艺路线名称"
        align="center"
        prop="processRouteName"
      />
      <el-table-column label="工艺" align="center" prop="processName" />
      <!-- <el-table-column label="工艺版本" align="center" prop="version" /> -->

      <el-table-column label="工厂" align="center" prop="factoryName" />

      <el-table-column label="工段" align="center" prop="workshopSectionName" />

      <el-table-column label="产线" align="center" prop="productLinesName" />

      <el-table-column
        label="工艺段"
        align="center"
        prop="processSectionName"
      />

      <el-table-column label="产品" align="center" prop="bomName" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="160"
      >
        <template #default="scope">
          <el-button
            link
            icon="edit"
            type="primary"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['technology:processRoute:edit']"
            >编辑</el-button
          >
          <el-button
            link
            icon="delete"
            type="primary"
            @click="handleDelete(scope.row)"
            v-hasPermi="['technology:processRoute:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改工艺路线对话框 -->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-model="open"
      width="700px"
      append-to-body
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20" style="height: 100%">
          <el-col :span="12">
            <el-form-item label="工艺路线编号" prop="processRouteNo">
              <code-input
                :disabled="!!form.id || disabledForm"
                v-model="form.processRouteNo"
                code="TECH_ROUTE_CODE"
                placeholder="请输入工艺路线编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工艺路线名称" prop="processRouteName">
              <el-input
                :disabled="disabledForm"
                v-model="form.processRouteName"
                placeholder="请输入工艺路线名称"
              />
            </el-form-item>
          </el-col>

          <SearchTool
            :layout="true"
            :span="12"
            :code="{
              factory: 'factoryCode',
              workshop: 'workshopSectionCode',
              line: 'productLinesCode',
              section: 'processSectionCode',
            }"
            :titles="{
              factory: '关联工厂',
              workshop: '关联工段',
              line: '关联产线',
              section: '关联工艺段',
            }"
            :itemStyle="{ width: '100%' }"
            v-model:factory="form.factoryCode"
            :disabled="disabledForm"
            v-model:factoryName="form.factoryName"
            v-model:workshop="form.workshopSectionCode"
            v-model:workshopName="form.workshopSectionName"
            v-model:line="form.productLinesCode"
            v-model:lineName="form.productLinesName"
            v-model:section="form.processSectionCode"
            v-model:sectionName="form.processSectionName"
          ></SearchTool>

          <el-col :span="12">
            <el-form-item label="关联工艺" prop="processName">
              <el-input
                :disabled="disabledForm"
                v-model="form.processName"
                placeholder="关联工艺"
              >
                <template #append>
                  <el-button icon="Promotion" @click="handlePicker" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联产出" prop="bomName">
              <el-input
                :disabled="disabledForm"
                v-model="form.bomName"
                placeholder="关联产出"
              >
                <template #append>
                  <el-button icon="Promotion" @click="handleProPicker" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                :disabled="disabledForm"
                v-model="form.remark"
                type="textarea"
                :maxlength="200"
                show-word-limit
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="!disabledForm" type="primary" @click="submitForm"
            >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <processSelect v-model="showProcess" @change="handleChange"></processSelect>
    <DialogTable
      title="关联产出"
      v-model:show="showPro"
      v-model="outputData"
      :initParam="initParam"
      :api="requestApi"
      :multiple="false"
      rowKey="code"
      labelKey="name"
      :columns="columns"
      :search="searchParams"
      :dataCallback="dataCallback"
      @change="handleProChange"
    ></DialogTable>
  </div>
</template>

<script setup name="ProcessRoute">
import {
  listProcessRoute,
  getProcessRoute,
  addProcessRoute,
  updateProcessRoute,
  delProcessRoute,
} from "@/api/technology/processRoute";
import { recipeMatList } from "@/api/technology/formulation";
import {
  listMat,
} from "@/api/base/material/MaterialApi";
import ProcessSelect from "../processManage/components/processSelect";
import { PRODUCT, SF_PRODUCT } from "@/constant";
const open = ref(false);
const loading = ref(true);
const showProcess = ref(false);
const showPro = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const processRouteNos = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const requestApi = ref(listMat);
const disabledForm = ref(false);
// 工艺路线表格数据
const processRouteList = ref([]);
const formRef = ref("formRef");
const initParam = ref({
  // type: `${PRODUCT},${SF_PRODUCT}`,
  types:['D','C']
});
const dataCallback = (res) => {
  return res.rows || [];
};
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    processRouteNo: null,
    processRouteName: null,
    factoryCode: null,
    factoryName: null,
    workshopSectionCode: null,
    workshopSectionName: null,
    productLinesCode: null,
    productLinesName: null,
    processSectionCode: null,
    processSectionName: null,
  },
  rules: {
    processRouteNo: [
      { required: true, message: "工艺路线编号不能为空", trigger: "blur" },
    ],
    processRouteName: [
      { required: true, message: "工艺路线名称不能为空", trigger: "blur" },
    ],
    factoryCode: [
      {
        required: true,
        message: "工厂不能为空",
        trigger: "change",
      },
    ],
    factoryName: [
      {
        required: true,
        message: "工厂不能为空",
        trigger: "change",
      },
    ],
    workshopSectionCode: [
      {
        required: true,
        message: "工段不能为空",
        trigger: "change",
      },
    ],
    workshopSectionName: [
      {
        required: true,
        message: "工段不能为空",
        trigger: "change",
      },
    ],
    productLinesCode: [
      {
        required: true,
        message: "产线不能为空",
        trigger: "change",
      },
    ],
    productLinesName: [
      {
        required: true,
        message: "产线不能为空",
        trigger: "change",
      },
    ],
    processSectionCode: [
      {
        required: true,
        message: "工艺段不能为空",
        trigger: "change",
      },
    ],
    processSectionName: [
      {
        required: true,
        message: "工艺段不能为空",
        trigger: "change",
      },
    ],
    processCode: [
      {
        required: true,
        message: "工艺不能为空",
        trigger: "change",
      },
    ],
    processName: [
      {
        required: true,
        message: "工艺不能为空",
        trigger: "change",
      },
    ],
    bomId: [
      {
        required: true,
        message: "关联产品不能为空",
        trigger: "change",
      },
    ],
    bomName: [
      {
        required: true,
        message: "关联产品不能为空",
        trigger: "change",
      },
    ],
  },
  columns: [
    {
      label: "物料编号",
      align: "center",
      prop: "code",
    },
    {
      label: "物料名称",
      align: "center",
      prop: "name",
    },
    {
      label: "物料分类",
      align: "center",
      prop: "typeName",
    },
    {
      label: "单位",
      align: "center",
      prop: "measureUnit",
    },
    {
      label: "型号",
      align: "center",
      prop: "model",
    },
    {
      label: "品牌",
      align: "center",
      prop: "brand",
    },
  ],
  searchParams: [
    {
      label: "物料编号",
      prop: "code",
    },
    {
      label: "物料名称",
      prop: "name",
    },
  ],
});

const { queryParams, form, rules, searchParams, columns } = toRefs(data);
const { proxy } = getCurrentInstance();


/** 查询工艺路线列表 */
function getList() {
  loading.value = true;
  listProcessRoute(queryParams.value).then((response) => {
    processRouteList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
const outputData = computed(() => {
  return {
    code:form.value.bomId,
    name:form.value.bomName
  }
})

function handlePicker() {
  if (disabledForm.value) {
    return;
  }
  showProcess.value = true;
}
function handleProPicker() {
  if (disabledForm.value) {
    return;
  }
  if (!form.value.processName) {
    proxy.$modal.msgError("请先关联工艺");

    return;
  }

  showPro.value = true;
}

function handleChange(val) {
  form.value.processCode = val.processCode;
  form.value.processName = val.processName;
  form.value.version = val.version;
  // initParam.value.prodNo = val.productCode;
}
function handleProChange(val) {
  form.value.bomId = val.code;
  form.value.bomName = val.name;
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}
// 表单重置
function reset() {
  form.value = {
    processRouteNo: null,
    processRouteName: null,
    factoryCode: null,
    factoryName: null,
    workshopSectionCode: null,
    workshopSectionName: null,
    productLinesCode: null,
    productLinesName: null,
    processSectionCode: null,
    processSectionName: null,
    craftCode: null,
    craftName: null,
    productCode: null,
    productName: null,

    remark: null,
  };
  proxy.resetForm("formRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  processRouteNos.value = selection.map((item) => item.processRouteNo);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  disabledForm.value = false;
  open.value = true;
  title.value = "新增工艺路线";
}
function handleDetail(row) {
  reset();
  const id = row.id || ids.value;
  disabledForm.value = true;
  getProcessRoute(id).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "工艺路线详情";
  });
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const id = row.id || ids.value;
  disabledForm.value = false;
  getProcessRoute(id).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "编辑工艺路线";
  });
}
/** 提交按钮 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateProcessRoute(form.value).then((response) => {
          proxy.$modal.msgSuccess("编辑成功");
          open.value = false;
          getList();
        });
      } else {
        addProcessRoute(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  const idList = row.id || ids.value;
  let msg = "";
  if (row.processRouteNo) {
    msg = `是否确认删除工艺路线编号为"${row.processRouteNo}"数据项？`;
  } else {
    msg = `是否确认删除所选数据项？`;
  }
  proxy.$modal
    .confirm(msg)
    .then(function () {
      return delProcessRoute(idList);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch((e) => {
      console.log(e);
    });
}
getList();
</script>
